<template>
  <div class="setting">
    <a-form
      :model="form"
      :style="{ width: '600px' }"
      :rules="rules"
      @submit="handleSubmit"
    >
      <a-form-item field="oldpassWord" label="旧密码">
        <a-input v-model="form.oldpassWord" placeholder="请输入旧密码" />
      </a-form-item>
      <a-form-item field="passWord" label="新密码">
        <a-input v-model="form.passWord" placeholder="请输入新密码" />
      </a-form-item>
      <a-form-item>
        <div class="btn">
          <a-button html-type="submit" type="primary" long>提交</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>
    
    <script setup lang="ts">
import { reactive, ref } from "vue";
import { userApi } from "@/api/index";
import { Message } from "@arco-design/web-vue";

let form = reactive({
  passWord: "",
  oldpassWord: "",
});
const rules = {
  oldpassWord: [
    {
      required: true,
      message: "name is required",
    },
  ],
  passWord: [
    {
      required: true,
      message: "phone is required",
    },
    {
      validator: (value, cb) => {
        if (value === form.oldpassWord) {
          cb("密码不能一样");
        } else {
          cb();
        }
      },
    },
  ],
};
const handleSubmit = (data) => {
//   console.log(data);
  if (!data.errors) {
    userApi
      .updatePwd(data)
      .then((res) => {
        // console.log(res);
        Message.success({
          content: res.msg || '提交成功',
          position: "top",
        });
      })
      .catch((err) => {
        // console.log(err);
        Message.error({
          content: err.msg || '未知错误请联系管理员',
          position: "top",
        });
      });
  }
};
</script>
    <style lang="less" scoped>
.setting {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 50px;
  //   align-items: center;
  //   justify-content: center;
}
</style>